<script setup>
import CartCard from '@/components/Cart/CartCard.vue';
import {useUserStore} from "@/stores/user.js";
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import {useShopInfoStore} from "@/stores/shop.js";
import {storeToRefs} from "pinia";

const route = useRoute();
const router = useRouter();
const shopInfoStore = useShopInfoStore();
const {nearbyList,orderList} = storeToRefs(shopInfoStore);
const shopID = ref(Number(route.query.shopID));
const shopInfo = ref(nearbyList.value.filter(item => item.id === shopID.value));
// console.log(shopInfo.value[0])
// currentUserInfo = '';
let {currentUserInfo} = storeToRefs(useUserStore());
// console.log(Boolean(currentUserInfo))
if (!currentUserInfo.value){
  currentUserInfo.value = {currentAddress:null}
  alert('请先登录');
  router.push({name: 'LoginView'});
}
const show=ref(false)

const confirmOrder = () => {
  orderList.value.push(shopInfo.value[0]);
  router.push({name: 'order'});

  // shopInfo.value[0].cartList=[]
}
if (shopInfo.value.length!==0){
  const countSum = () => {
    shopInfo.value[0].cartList.forEach(item => {
      shopInfo.value[0].cartList.sum+=item.number*item.price.toFixed(2)
    })
  };
  countSum();
}
</script>

<template>
  <div class="order_confirmation">
    <div class="order_confirmation_header">
      <div class="order_confirmation_header_title">
        <span class="iconfont title_back" @click="$router.go(-1)">&#xe697;</span>
        <div class="title_text">确定订单</div>
      </div>
      <div class="order_confirmation_header_address">
        <div class="address_title">收货地址</div>
        <div class="current_address" @click="$router.push('/address')">
          <div class="current_address_info" v-if="currentUserInfo.currentAddress">
            <div>{{ currentUserInfo.currentAddress.address_text }}</div>
            <div>{{ currentUserInfo.currentAddress.name }} {{ currentUserInfo.currentAddress.phone }}</div>
          </div>
          <div class="current_address_info" v-else >暂无收货地址</div>
          <div class="iconfont current_address_icon" >&#xe697;</div>
        </div>
      </div>
    </div>
    <div class="order_confirmation_content">
      <CartCard />
    </div>
    <div class="order_confirmation_footer">
      <div class="total_price">实付金额: <b>￥{{ (shopInfo[0].cartList.sum) }}</b></div>
      <div class="submit" v-if="true" @click="show = true">提交订单</div>
    </div>
    <!-- 蒙层 -->
    <div class="mask" v-if="show">
      <div class="mask_content">
        <div class="mask_content_title">确认要离开收银台?</div>
        <div class="mask_content_desc">请尽快完成支付,否则将被取消</div>
        <div class="mask_content_btn">
          <div class="btn cancel" @click="show = false">取消订单</div>
          <div class="btn confirm" @click="confirmOrder">确定支付</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.order_confirmation {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #eee;

  &_header {
    padding: .18rem;
    height: 1.6rem;
    background-image: linear-gradient(0deg, rgba(0, 145, 255, 0.00) 4%, #0091FF 50%);
    background-size: 100% 1.6rem;
    background-repeat: no-repeat;

    &_title {
      display: flex;
      color: $bgColor;

      .title_back {
        font-size: .22rem;
      }
      .title_text {
        flex: 1;
        text-align: center;
        font-size: .16rem;
      }
    }
    &_address {
      padding: .18rem;
      background-color: $bgColor;
      margin-top: .28rem;
      line-height: .22rem;
      font-size: .16rem;
      color: $content_fontcolor;
      border-radius: .04rem;
      .address_title {
        margin-bottom: .18rem;
      }
      .current_address {
        display: flex;
        justify-content: space-between;

        &_info {
          div:last-child {
            font-size: .12rem;
          }
        }

        &_icon {
          transform: rotate(180deg);
          margin-right: .08rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
  }

  &_content {
    width: 100%;
    position: absolute;
    top: 2rem;
    bottom: .5rem;
    box-sizing: border-box;
    overflow-y: scroll;
  }

  &_footer {
    height: .5rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $bgColor;
    line-height: .5rem;
    display: flex;

    .total_price {
      flex: 1;
      padding-left: .18rem;
    }
    .submit {
      width: 1rem;
      height: .5rem;
      background-color: $btn-bgColor;
      color: $bgColor;
      text-align: center;
      font-size: .14rem;
    }
  }

  // 蒙层
  .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba($color: #000000, $alpha: .5);
    display: flex;
    justify-content: center;
    align-items: center;

    &_content {
      width: 80%;
      padding: .24rem;
      box-sizing: border-box;
      background-color: $bgColor;
      border-radius: .04rem;
      text-align: center;

      &_title {
        font-size: .18rem;
        font-weight: bold;
        color: $content_fontcolor;
      }
      &_desc {
        margin: .12rem 0;
        line-height: .2rem;
        font-size: .14rem;
        color: $medium-fontColor;
      }
      &_btn {
        display: flex;
        justify-content: center;

        .btn {
          width: .8rem;
          height: .32rem;
          border-radius: .24rem;
          font-size: .14rem;
          line-height: .32rem;
        }
        .cancel {
          margin-right: .12rem;
          border: solid .01rem $btn-bgColor;
          color: $btn-bgColor;
        }
        .confirm {
          background-color: $btn-bgColor;
          color: $bgColor;
        }
      }
    }
  }
}

</style>